<template>
    <van-nav-bar title="退货商品" left-text="" left-arrow @click-left="goBack" />

    <section class="aui-flexView">
        <!-- 订单详细 -->
        <section class="aui-scrollView">
            <!-- 订单状态 -->
            <div class="aui-pay-change">
                <div class="aui-flex">
                    <div class="aui-flex-box">
                        <h3>{{ detail.status_text }}</h3>
                    </div>
                    <div class="aui-pay-zfb">
                        <img src="/assets/images/icon-zfb.png" alt="" />
                    </div>
                </div>
            </div>

            <!-- 退货地址 -->
            <div class="aui-flex">
                <div style="font-size: 16px">退货地址：</div>
                <div class="aui-flex-box">
                    <h3>
                        {{ detail.refund.company }}  <em> {{ detail.refund.mobile }} </em>
                    </h3>
                    <p>{{ detail.refund.address }}</p>
                </div>
            </div>

            <!-- 退货信息 -->
            <div class="aui-commodity-bg">
                <van-form @submit="onSubmit">
                    <van-cell-group inset>
                        <!--地址列表-->
                        <van-field v-model="address_text" is-link readonly name="status" label="地址列表"
                            placeholder="点击选择地址列表" @click="showAddressPicker = true"
                            :rules="[{ required: true, message: '请选择地址列表' }]" />
                        <van-popup v-model:show="showAddressPicker" destroy-on-close position="bottom">
                            <van-picker :columns="addresslist" @confirm="onConfirmAddress"
                                @cancel="showAddressPicker = false" />
                        </van-popup>

                        <!-- 物流公司-->
                        <van-field v-model="express_text" is-link readonly name="status" label="物流公司"
                            placeholder="点击选择物流公司" @click="showExpressPicker = true"
                            :rules="[{ required: true, message: '请选择物流公司' }]" />
                        <van-popup v-model:show="showExpressPicker" destroy-on-close position="bottom">
                            <van-picker :columns="expresslist" @confirm="onConfirmExpress"
                                @cancel="showExpressPicker = false" />
                        </van-popup>

                        <!-- 快递单号 -->
                        <van-field v-model="expresscode" label="快递单号" name="expresscode" placeholder="请输入快递单号"
                            :rules="[{ required: true, message: '请输入快递单号' }]" />
                    </van-cell-group>
                    <div style="margin: 16px;">
                        <van-button round block type="primary" native-type="submit">
                            提交
                        </van-button>
                    </div>
                </van-form>

            </div>
        </section>
    </section>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const goBack = () => { proxy.$router.go(-1) }
const LoginUser = reactive(proxy.$cookies.get('LoginUser') ?? {})
const orderid = proxy.$route.query.orderid ? proxy.$route.query.orderid : 0;
const detail = ref({
    address: {},
    refund: {}
})
const expresscode = ref('')
// 物流公司
const express_text = ref('')
const expresslist = ref([])
const expressid = ref('')
const showExpressPicker = ref(false)
// 地址列表
const address_text = ref([]);
const addressid = ref('')
const addresslist = ref([])
const showAddressPicker = ref(false)

onBeforeMount(() => {
    getOrderInfoData()
    getAddressData();
    getExpressData()
})
const getOrderInfoData = async () => {
    let result = await Api.OrderInfo({
        busid: LoginUser.id,
        orderid: orderid,
    })
    if (result.code == 1) {
        detail.value = result.data
    }
}

const getAddressData = async () => {
    let result = await Api.AddressIndex({
        busid: LoginUser.id,
    })

    if (result.code == 1) {
        addresslist.value = [];
        result.data.forEach((item) => {
            addresslist.value.push({
                text: `${item.consignee} - ${item.mobile} - ${item.region_text}${item.address}`,
                value: item.id,
            })
        })
    }
}

// 物流信息
const getExpressData = async () => {

    let result = await Api.OrderLogistics({
        busid: LoginUser.id,
    })

    if (result.code == 1) {
        expresslist.value = result.data;
    }
}

const onConfirmExpress = ({ selectedValues, selectedOptions }) => {
    express_text.value = selectedOptions[0]?.text;
    expressid.value = selectedOptions[0]?.value;
    showExpressPicker.value = false;
}

const onConfirmAddress = ({ selectedValues, selectedOptions }) => {
    address_text.value = selectedOptions[0]?.text;
    addressid.value = selectedOptions[0]?.value;
    showAddressPicker.value = false;
}

const onSubmit = async (val) => {

    let result = await Api.OrderRefundgoods({
        busid: LoginUser.id,
        orderid: orderid,
        addressid: addressid.value,
        expressid: expressid.value,
        expresscode: expresscode.value,
    })
    if (result.code == 1) {
        success({
            message: result.msg,
            onClose: () => {
                goBack()
            }
        });
    }
    else {
        error(result.msg);
    }
}
</script>
<style>
@import url('/assets/css/info.css');
</style>